根據上次跟大家初步的討論HTML的入門內容,今天也要教大家5個HTML你可以學習的方向與例子 :
<header>
、<nav>
、<section>
和<article>
,以及多媒體元素<video>
和<audio>
**等。HTML5引入了一系列新的元素和API,使網頁開發更強大和互動性更高。<header>
<h1>網頁標題</h1>
</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</nav>
<section>
<h2>關於我們</h2>
<p>我們是一支充滿創意的團隊...</p>
</section>
<article>
<h2>最新新聞</h2>
<p>我們的公司剛剛宣布了一個重要的新項目...</p>
</article>
<form>
、<input>
、<select>
和<textarea>
**來設計互動式表單,以收集和提交用戶數據。<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="提交">
</form>
<div>
<header>
<h1>網頁標題</h1>
</header>
<main>
<section>
<h2>內容部分1</h2>
<p>這是第一個內容區塊。</p>
</section>
<section>
<h2>內容部分2</h2>
<p>這是第二個內容區塊。</p>
</section>
</main>
<footer>
<p>© 2023 作者名稱</p>
</footer>
</div>
<iframe>
**來嵌入外部內容,例如嵌入式地圖或社交媒體帖子。<img src="image.jpg" alt="圖片描述">
<video src="video.mp4" controls></video>
<iframe src="(網址)" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<head>
<link rel="stylesheet" href="styles.css">
</head>